<template>
	<view id="flow-task">
		<view class="task-time-box">
			<view class="left-box">
				<view class="title">任务倒计时</view>
				<view class="time-box"><text class="time">{{taskHourTime}}</text>:<text class="time">{{taskMinuteTime}}</text>:<text class="time">{{taskSecondTime}}</text></view>
			</view>
			<view class="give-up-btn" @click="showGiveUpTaskModal=true">放弃任务</view>
		</view>
		<view class="card">
			<view class="card-title">
				<view class="icon-style el-icon-ali-goods"></view>
				<view class="title">目标商品</view>
			</view>
			<view class="card-content">
				<view class="goods-title">{{taskDetail.goods_title}}</view>
				<view class="goods-info">
					<canvas class="goods-img" canvas-id="firstCanvas"></canvas>
					<view class="goods-param-box">
						<view class="goods-param">{{getShopName(taskDetail.shop_type)}}：<text class="content">{{ taskDetail.shop_name }}</text></view>
						<view class="goods-param">搜索展示价格：<text class="content-price">{{ taskDetail.show_money }}</text></view>
						<view class="goods-param">销量：<text class="content">约{{ taskDetail.pay_person }}人付款</text></view>
						<view class="goods-param">地址：<text class="content">{{ taskDetail.goods_address }}</text></view>
					</view>

				</view>
			</view>
		</view>

        <view class="card" v-if="taskDetail.compare_keyword">
            <view class="card-title">
                <view class="icon-style el-icon-ali-search-key"></view>
                <view class="title">货比三家关键词</view>
            </view>
            <view class="card-content">
                <view class="card-row-container">
                    <view class="row-title">关键词:</view>
                    <view class="row-content" >
                        <view class="theme-style" @click="copyCompareKeyword(taskDetail.compare_keyword)">
                            <view class="keyword">{{taskDetail.compare_keyword}}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

		<view class="card">
			<view class="card-title">
				<view class="icon-style el-icon-ali-search-key"></view>
				<view class="title">搜索关键词</view>
			</view>
			<view class="card-content">
				<view class="qrcode-box" v-if="taskDetail.entrance_type == 3">
					<view class="note">
						长按保存图片，{{tbTm.indexOf(taskDetail.shop_type) >= 0 ? '淘宝app':'微信'}}扫一扫打开
					</view>
					<view>
						<image @longtap="saveImg(taskDetail.keyword)" class="qrcode-img" :src="taskDetail.keyword" mode=""></image>
					</view>
				</view>
				<view class="card-row-container" v-else>
					<view class="row-title">
						{{entranceName[taskDetail.entrance_type]}}:
					</view>

					<view class="row-content" >
						<view class="keyword-text" v-if="keywordOptType == 1">{{taskDetail.keyword}}</view>
						<view class="theme-style" v-else @click="copyKeyword(taskDetail.keyword)">
							<view class="keyword">{{taskDetail.keyword}}</view>
							<view class="pinyin" v-if="!isLetter"><text class="letter" v-for="(py, pyIndex) in pyArr" :key="pyIndex">{{py.py}}</text></view>
						</view>
						<view class="copy-btn-box" v-if="copyShowType.indexOf(taskDetail.entrance_type)>=0">
							<view class="copy-btn"  v-if="keywordOptType == 1" @click="copyKeyword(taskDetail.keyword)">复制</view>
						</view>
					</view>
				</view>
				<view class="require-box" style="margin-top: 32upx;">
					<view class="require-icon el-icon-ali-task-request"></view>
					<view class="require-content">
						商家要求：{{taskDetail.remark}}
					</view>
				</view>
			</view>
		</view>
		<view class="card">
			<view class="card-title">
				<view class="icon-style el-icon-ali-check"></view>
				<view class="title">核验商品</view>
			</view>
			<view class="card-content">
				<view class="shop-name-box">{{getShopName(taskDetail.shop_type)}}商家店铺名：<text class="name">{{ taskDetail.shop_name }}</text></view>
				<view class="card-row">
					<view class="tips">该任务是浏览任务，不要下单！</view>
					<view class="card-input-box">
						<view class="input-box">
							<input class="input" :placeholder="stickTypeData[stickType]" type="text" v-model="tbPassword" />
							<image v-show="tbPassword"  class="clear-btn" @click="tbPassword = ''" src="../../static/img/clear.png" mode=""></image>
						</view>
						<button class="check-btn" @click="matchGoods">{{checkBtnTitle[stickType]}}</button>
					</view>
					<view class="tips marginStyle" v-if="taskForm.shopStatus">核对成功 店铺：{{shopNameText}}</view>
				</view>

			</view>
		</view>
		<view class="card" v-if="uploadTypes.length > 0">
			<view class="card-title">
				<view class="icon-style el-icon-ali-upload-img-icon"></view>
				<view class="title">截图上传</view>
			</view>
			<view class="card-content">
				<view class="upload-box" v-for="(item,index) in uploadTypes" :key="index" @click="chooseImage(item)">
					<image class="upload-img" v-if="taskForm[item]"  :src="taskForm[item]" mode=""></image>
					<view class="upload-icon el-icon-ali-upload-img" v-else></view>
					<view class="title">{{getUploadTypeName(item)}}</view>
				</view>
			</view>
		</view>
		<button class="sumbit-btn" :loading="loading" :disabled="loading" @click="submitTask">提交任务</button>
		<u-modal
			:showModal="showGiveUpTaskModal"
			title="放弃任务"
			@cancleModal = "showGiveUpTaskModal=false"
			@confirmModal="taskGiveUp"
			>
			<view>
				<view class="uni-list">
					<radio-group @change="reasonChange">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in giveUpReason" :key="index">
							<view style="margin-bottom: 8px;">
								<view style="display: inline-block;">
									<radio :value="item.value" style="transform:scale(0.8)" :checked="index === checkReason" />
								</view>
								<view style="display: inline-block;vertical-align: middle;">{{item.name}}</view>
							</view>
						</label>
					</radio-group>
				</view>
			</view>
		</u-modal>
		<u-modal
			:showModal="isShowTipsModal"
			title="温馨提示"
			:showCancel = "false"
			@confirmModal="isShowTipsModal=false"
			>
			<view>
				<view>请务必用当前绑定的账号</view>
				<view style="font-size: 44upx;color: red;margin: 20upx 0;">{{taskDetail.tb_name}}</view>
				<view>去浏览，不要下单</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		apiSaleFlowTaskDetail,
		apiSubmitFlowTask,
		apiUploadToken,
		apiGiveUpTask,
		apiInquiryTbGoodsName
	} from '../../../http/apis.js'
	import {
		mapState
	} from 'vuex'
	import qiniuUploader from '../../components/qiniu/qiniuUploader.js';
	import pyconst from '../../components/pyconst/vue-py.js';
	import uModal from '../../components/uni-modal/uni-modal.vue'
	export default {
		computed: {
			...mapState(['token'])
		},
		components: {
			pyconst,
			uModal
		},
		data(){
			return{
				loading:false,
				taskDetail: {},
				checkTimer: null,
				timer: null,
				taskHourTime: '00',
				taskSecondTime: '00',
				taskMinuteTime: '00',
				noteMatterStatus: false,
				showGiveUpTaskModal: false,
				giveUpReason: [{
					value: '2',
					name: '不想做了'
				},{
					value: '1',
					name: '找不到商品'
				},{
					value: '3',
					name: '现在没时间做'
				},{
					value: '4',
					name: '不能满足商家的要求'
				},{
					value: '5',
					name: '任务有问题（可联系QQ客服）'
				},{
					value: '7',
					name: '没有本金做任务'
				}],
				checkReason: 0,
				pyArr: [],
				isLetter: false,
				keywordOptType: 1,
				isShowModal: false,
				isShowTipsModal: false,
				entranceName:{
				  1: '关键词',
				  2: '淘口令',
				  4: '视频链接',
				  5: '下单入口'
				},
				copyShowType: [1,2,4,5],
				tbTm:[1,2],
				storeName:{
				  1: '淘宝',
				  2: '天猫',
				  3: '京东',
				  4: '1688',
				  13: '唯品会',
				  15: '拼多多',
				  20: '抖音'
				},
				uploadToken: '',
				countdownNum: 50,
				stickTypeData: {
					1: '请复制商品标题进行核对',
					2: '请复制商品链接进行核对',
					3: '请复制淘口令进行核对',
					4: '请复制店铺名进行核对'
				},
				checkBtnTitle:{
					1: '核对标题',
					2: '核对链接',
					3: '核对淘口令',
					4: '核对店铺名'
				},
				shopNameText: '',
				pushTaskId: '',
				taskForm: {
					token: '',
					pushTaskId: '',
					compareImg: '',
					addCartImg: '',
					collectImg: '',
					attentionImg: '',
					shopStatus: '',
					showType: ''
				},
				giveUpForm:{
					token: '',
					pushTaskId: '',
					giveUpType: 2
				},
				stickType: 1,
				uploadTypes: [],
				tbPassword: ''
			}
		},
		onShow() {
			this.getTaskDetail();
			this.platform = uni.getSystemInfoSync().platform
		},
		onLoad(options) {
			clearInterval(this.timer);
			clearInterval(this.checkTimer);
			this.pushTaskId = options.id;
			this.taskForm.pushTaskId = this.pushTaskId
			this.taskForm.token = this.token
			this.giveUpForm.pushTaskId = this.pushTaskId
			this.giveUpForm.token = this.token
			apiUploadToken({}).then(res =>{
			    if(res.data.code == 1)  {
					this.uploadToken = res.data.msg
				}
			}).catch(res => {
				this.$msg.showToast(res.data.msg)
			})
		},
		methods:{
			submitTask(){
				if (!this.taskForm.shopStatus) {
					this.$msg.showToast('请先核对商品')
					return;
				}
				for(var i in this.uploadTypes) {
					if(!this.taskForm[this.uploadTypes[i]]){
						this.$msg.showToast('请先上传完所有图片')
						return;
					}
					if(this.taskForm[this.uploadTypes[i]].indexOf('flow') < 0){
						this.$msg.showToast('未获取到' + this.getUploadTypeName[this.uploadTypes[i]] + '，请重新上传图片')
						return;
					}
				}
				uni.showLoading({
					title: '提交中...',
					mask: true
				});
				this.loading = true
				this.taskForm.shopStatus = this.taskForm.shopStatus ? 1 : 2
				this.taskForm.showType = this.taskDetail.flow_task_type
				apiSubmitFlowTask(this.taskForm).then(res =>{
				    uni.hideLoading();
				    if(res.data.code == 1)  {
				    	this.$msg.showToast(res.data.msg)
				    	setTimeout(() => {
				    		this.loading = false
				    		uni.switchTab({
				    			url: './taskList'
				    		});
				    	}, 1000);
				    } else {
				    	this.loading = false
				    	this.$msg.showToast(res.data.msg)
				    }
				}).catch(res => {
					uni.hideLoading();
					this.loading = false
					this.$msg.showToast(res.data.msg)
				})
			},
			getTaskDetail(){
				apiSaleFlowTaskDetail({
					token: this.token,
					pushTaskId: this.pushTaskId
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.taskDetail = res.data.msg;
						this.shopNameText = this.taskDetail.shop_name
						this.isShowTipsModal = true
						if(this.taskDetail.shop_type == 1 || this.taskDetail.shop_type == 2){
							this.stickType = parseInt(this.taskDetail.tkl_config)
						} else if(this.taskDetail.shop_type == 20){
                            this.stickType = 4;
                        } else {
							this.stickType = 2
						}
						//商品标题进行处理
						let goodsTitle = ''
						for(let i in this.taskDetail.goods_title){
							if((parseInt(i) + 1) % 2 != 0){
								goodsTitle += '*'
							} else {
								goodsTitle += this.taskDetail.goods_title[i]
							}
						}
						if(goodsTitle.length > 15){
							goodsTitle = goodsTitle.substr(0,20) + '...';
						}
						this.taskDetail.goods_title = goodsTitle
						//店铺名称处理
						let shopName = ''
						for(let i in this.taskDetail.shop_name){
							if((parseInt(i) + 1) % 2 != 0){
								shopName += '*'
							} else {
								shopName += this.taskDetail.shop_name[i]
							}

						}
						this.taskDetail.shop_name = shopName
						//汉字转拼音
						var reg=/^[A-Za-z]+$/;
						if(reg.test(this.taskDetail.keyword)){
							this.isLetter = true
						} else {
							this.isLetter = false
						}
						if(this.taskDetail.entrance_type ==1) {
							if(this.taskDetail.keyword.length > 6 || this.taskDetail.keyword.indexOf(' ')>=0){
								this.keywordOptType = 1
							} else {
								this.keywordOptType = this.taskDetail.keyword_config == 0 ? 1 : this.taskDetail.keyword_config
								if(this.keywordOptType == 2){
									this.pyArr=pyconst.chineseToPinYin(this.taskDetail.keyword)
								}
							}

						}
						let goodsImg = this.taskDetail.goods_img;
						if(goodsImg != null && goodsImg.indexOf('qiniu') != -1){
							goodsImg = goodsImg+'?imageView2/2/w/200';
						}
						this.getNewGoodsImg(goodsImg);
						this.countTime(parseInt(this.taskDetail.task_over_time));
						this.setFlowUploadType();
					}  else if (res.data.code == 2024) {
						this.$msg.showToast(res.data.msg)
						setTimeout(()=>{
							uni.switchTab({
								url: '../home/home'
							});
						},500)
					} else {
						this.$msg.showToast(res.data.msg)
						setTimeout(()=>{
							uni.switchTab({
								url: '../home/home'
							});
						},500)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			countTime(leftTime) {
				var that = this;
				var remain, hour, minute, second;
				remain = leftTime % 86400;
				hour = parseInt(remain / 3600);
				//计算分钟数
				remain = remain % 3600;
				minute = parseInt(remain / 60);
				//计算秒数
				second = remain % 60;
				that.timer = setInterval(function() {
					// var leftTime = end - now //时间差
					if (leftTime >= 0) {
						second = second - 1;
						if (second == -1) {
							second = 59;
							minute = minute - 1;
						} else if (minute == -1) {
							minute = 59;
							hour = hour - 1;
						}
						if (hour == 0 && minute == 0 && second == 0) {
							that.taskHourTime = '00'
							that.taskSecondTime = '00'
							that.taskMinuteTime = '00'
							clearInterval(that.timer);
							that.giveUpForm.giveUpType = 6
							that.taskGiveUp()
							return;
						}
						that.taskHourTime = that.spliceTime(hour)
						that.taskSecondTime = that.spliceTime(second)
						that.taskMinuteTime = that.spliceTime(minute)
					} else {
						clearInterval(that.timer);
						that.giveUpForm.giveUpType = 6
						that.taskGiveUp()
					}
				}, 1000);
			},
			spliceTime(time) {
				if (time < 10) {
					time = '0' + time;
				}
				return time;
			},
			setFlowUploadType() {
			    if (this.taskDetail.compare_keyword){
                    this.uploadTypes = ['compareImg']
                }
				const enumType = {
					attentionImg: [2, 5, 6, 8],
					addCartImg: [3, 5, 7, 8],
					collectImg: [4, 6, 7, 8]
				};
				Object.keys(enumType).forEach(key => {
					if (enumType[key].some(item => item === this.taskDetail.flow_task_type)) {
						this.uploadTypes.push(key);
					}
				});
			},
			getUploadTypeName(type){
				const typeName = {
                    compareImg: '货比三家截图',
					attentionImg: '关注店铺截图',
					addCartImg: '加入购物车截图',
					collectImg: '收藏商品截图'
				};
				return typeName[type];
			},
			getNewGoodsImg(img) {
				uni.getImageInfo({
					src: img,
					success: function(res) {
						//绘制背景图
						uni.getImageInfo({
							src: '../../static/img/msk_img.png',
							success: function(msk) {
								//绘制背景图
								let ctx = uni.createCanvasContext('firstCanvas');
								ctx.drawImage(res.path, 0, 0, 100, 100);
								ctx.drawImage(msk.path, 30, 30, 40, 40);
								ctx.draw();
							}
						});
					}
				});
			},
            copyCompareKeyword(id) {
                uni.setClipboardData({
                    data: id,
                    success: (data) => {
                        this.$msg.showToast('复制成功')
                    },
                    fail: function(err) {},
                    complete: function(res) {}
                });

            },
			copyKeyword(id) {
				if(this.keywordOptType == 1){
					uni.setClipboardData({
						data: id,
						success: (data) => {
							this.$msg.showToast('复制成功')
						},
						fail: function(err) {},
						complete: function(res) {}
					});
				} else {
					this.$msg.showToast('请手动输入关键词到搜索框')
				}
			},
			taskGiveUp(){
				apiGiveUpTask(this.giveUpForm).then(res =>{
					this.showGiveUpTaskModal = false
				    if(res.data.code == 1)  {
						this.$msg.showToast('放弃成功')
						setTimeout(() => {
							uni.switchTab({
								url: '../home/home'
							});
						}, 500);
					} else {
						this.$msg.showToast(res.data.msg)
					}

				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			matchGoods() {
				if(!this.tbPassword){
					this.$msg.showToast('请先输入需要核对的内容')
					return
				}
				apiInquiryTbGoodsName({
					token: this.token,
					pushTaskId: this.pushTaskId,
					tbPassword: this.tbPassword,
					planType: this.taskDetail.plan_type //1：销量 2：流量 3：评论
				}).then(res =>{
				    if(res.data.code == 1)  {
						this.taskForm.shopStatus = true
						this.$msg.showToast(res.data.msg)
					}  else {
						this.taskForm.shopStatus = false
						this.$msg.showToast(res.data.msg)
					}
				}).catch(res => {
					this.$msg.showToast(res.data.msg)
				})
			},
			chooseImage(type) {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original','compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: (res)=> {
						this.uploadImg(res,type, res.tempFiles[0].size > 1570000);
					}
				});

			},
			uploadImg(typeimg,type,fileSize){
				var that = this;
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.getImageInfo({
					src:typeimg.tempFilePaths[0],
					success(res) {
						let canvasWidth = res.width //图片原始长宽
						let canvasHeight = res.height
						let img = new Image()
						img.src = res.path
						let canvas = document.createElement('canvas');
						let ctx = canvas.getContext('2d')
						let scale = res.height/res.width
						canvas.width = fileSize == true ? 500 : canvasWidth
						canvas.height = fileSize == true ? 500*scale : canvasHeight
						ctx.drawImage(img, 0, 0, fileSize == true ? 500 : canvasWidth , fileSize == true ? 500*scale : canvasHeight )//fileSize == true ? 300 : canvasHeight / 2

						canvas.toBlob(function(fileSrc) {
							let imgSrc = window.URL.createObjectURL(fileSrc)

							var random = Math.floor(Math.random() * (1000 - 1)) + 1
							var timestamp=new Date().getTime();
							var name=imgSrc.substring(imgSrc.lastIndexOf("-")+1);
							var key = name + random.toString() + timestamp.toString() + '.png'
							 qiniuUploader.upload(
							    imgSrc,
							    res => {
							        //图片上传完成后返回值
									that.taskForm[type] = res.imageURL;
									uni.showToast({title: '上传成功',duration: 1000,icon:'none'})
							    },
							    error => {
							        // resolve(error)
									uni.hideLoading()
									uni.showToast({title: '上传失败',duration: 1000,icon:'none'})
							    },
							    {
							        region: that.GLOBAL.REGION_VALUE, // （必须填写正确）ECN, SCN, NCN, NA, ASG，分别对应七牛的：华东，华南，华北，北美，新加坡 5 个区域
							        domain: that.GLOBAL.QINIU_URL, // // bucket 域名，下载资源时用到。如果设置，会在 success callback 的 res 参数加上可以直接使用的 ImageURL                                         字  段。否则需要自己拼接
							        key: 'flow/' + key, // [非必须]自定义文件 key。如果不设置，默认为使用微信小程序 API 的临时文件名
							        // 以下方法三选一即可，优先级为：uptoken > uptokenURL > uptokenFunc
							        uptoken: that.uploadToken // 由其他程序生成七牛 uptoken
							    },
							    res => {
							         //上传进度
							        if(res.progress === 100){
										uni.hideLoading()
							        }
							    }
							);
						})
					},
					fail(err) {
						uni.showToast({title: err.errMsg,duration: 1000,icon:'none'})
						uni.hideLoading()
					}
				})

			},
			saveImg(url){
				if(uni.getStorageSync('mobilePlatformType') == 'APP'){
					uni.showLoading({
						title: '下载中',
						mask: true
					})
					let filename = Math.random() +".png"
					plus.downloader.createDownload(url, {
					    filename:"_downloads/"+filename
					 }, (download,status)=>{
					    if(status==200){//下载成功
					       plus.gallery.save( download.filename, ()=>{
					            uni.hideLoading();
					            uni.showToast({
					                title: '下载成功！'
					           });
					        })
					   }
					}).start()
				}

			},
			showImg(url){
				window.location.href= url
			},
			reasonChange(evt){
				for (let i = 0; i < this.giveUpReason.length; i++) {
					if (this.giveUpReason[i].value === evt.target.value) {
						this.checkReason = i;
						this.giveUpType = this.giveUpReason[i].value
						break;
					}
				}
			},
			showGiveUpModal(){
				this.showGiveUpTaskModal = true
			},
			getShopName(type) {
				return this.storeName[type]
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
	#flow-task {
		.task-time-box {
			display: flex;
			background: #FFEFDC;
			padding: 20upx 32upx;
			align-items: center;
			margin-bottom: 32upx;
			.left-box {
				flex: 1;
				.title {
					font-size: 24upx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: $theme-color;
					line-height: 34upx;
				}
				.time-box {
					color: $theme-color;
					font-size: 20upx;
					margin: 18upx 0;
					.time {
						font-size: 20upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 28upx;
						background: $theme-color;
						border-radius: 4upx;
						padding: 4upx;
					}
				}
			}
			.give-up-btn {
				width: 152upx;
				height: 60upx;
				font-size: 26upx;
				font-family: PingFang-SC-Medium, PingFang-SC;
				font-weight: 500;
				color: #FF5001;
				line-height: 60upx;
				border-radius: 30upx;
				border: 1px solid #FF5001;
				text-align: center;
			}
		}
		.card {
			padding: 48upx 30upx;
			background: #FFFFFF;
			margin-bottom: 24upx;
			margin: 0 30upx 24upx 30upx;
			border-radius: 24upx;
			.card-title {
				color: $theme-color;
				.icon-style {
					display: inline-block;
					margin-right: 10upx;
				}
				.title {
					display: inline-block;
					font-size: 30upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FF5001;
					line-height: 28upx;
				}
			}
			.card-content {
				.card-row {
					// border-bottom: 1px solid #E9E9E9;
					padding: 24upx 0;
				}
				.keyword-text {
					color: $theme-color;
					font-weight: 500;
					font-family: PingFangSC-Regular, PingFang SC;
					line-height: 40upx;
					font-size: 28upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					display: inline-block;
					vertical-align: bottom;
					width: 460upx;
				}
				.pinyin {
					margin-top: 10upx;
					.letter{
						margin-right: 16upx;
					}
				}
				.qrcode-box {
					border-bottom: 1px solid #E9E9E9;
				}
				.card-row-container{
					border-bottom: 1px solid #E9E9E9;
					padding: 24upx 0;
					font-family: PingFangSC-Regular, PingFang SC;
					line-height: 40upx;
					display: flex;
					font-size: 28upx;
					.row-title {
						color: #666666;
						margin-right: 20upx;
						font-weight: 400;
					}

					.row-content {
						flex: 1;
						.black-style {
							font-weight: 500;
							color: #333333;
						}
						.theme-style{
							color: $theme-color;
							font-weight: 500;
						}
						.copy-btn-box {
							text-align: right;
							margin-top: 10upx;
							.copy-btn {
								font-size: 22upx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #333333;
								line-height: 32upx;
								background: #F5F5F5;
								border-radius: 18upx;
								padding: 3px 20upx;
								display: inline-block;
							}
						}
					}
				}
				margin-top: 24upx;
				.goods-title {
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 24upx;
				}
				.goods-info {
					margin-top: 32upx;
					display: flex;
					.goods-img,#firstCanvas{
						width: 220upx;
						height: 220upx;
					}
					.goods-param-box {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						color: #666666;
						line-height: 26upx;
						display: inline-block;
						margin-left: 32upx;
						vertical-align: top;
						.goods-param:nth-child(1),.goods-param:nth-child(2),.goods-param:nth-child(3){
							margin-bottom: 26upx;
						}
						.goods-param {
							font-size: 28upx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							line-height: 28upx;
							.content {
								color: #333333;
							}
							.content-price {
								color: $theme-color;
							}
						}
					}
				}
				.note {
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 44upx;
				}
				.qrcode-img {
					width: 260upx;
					height: 260upx;
					margin: 20upx auto;
				}
				.require-box {

					display: flex;
					.require-icon {
						color: $theme-color;
						display: inline-block;
						font-size: 24upx;
						margin-right: 10upx;
						margin-top: 4upx;
					}
					.require-content {
						display: inline-block;
						font-size: 24upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: $theme-color;
						line-height: 36upx;
					}
				}
				.shop-name-box {
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 40upx;
					.name {
						font-weight: 500;
						color: #333333;
					}
				}
				.tips{
					font-size: 24upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: $theme-color;
					line-height: 24upx;
					margin-top: 10upx;
				}
				.marginStyle{
					margin: 20upx 0;
				}
				.step {
					color: red;
					.click-icon {
						display: inline-block;
						font-size: 28upx;
					}
					.step {
						display: inline-block;
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 28upx;
						margin-top: 28upx;
					}
				}
				.card-input-box {
					display: flex;
					margin-top: 12upx;
					align-items: center;
					.input-box {
						position: relative;
						flex: 1;
					}
					.input {
						height: 72upx;
						background: #FFFFFF;
						border-radius: 10upx;
						border: 1px solid #DFDFDF;
						padding-left: 32upx;
						font-size: 28upx;
					}

					.clear-btn {
						width: 34upx;
						height: 34upx;
						position: absolute;
						right: 4upx;
						top: 12upx;
						padding: 10upx;
						background: #fff;
					}
					.check-btn {
						width: 200upx;
						height: 72upx;
						background: #FF8C00;
						border-radius: 10upx;
						font-size: 28upx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #FFFFFF;
						line-height: 72upx;
						margin-left: 20upx;
					}
				}

				.small-title {
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					line-height: 40upx;
					color: #666666;
					font-weight: 400;
					margin-right: 12upx;
				}
				.center-text-box {
					font-size: 28upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 40px;
					.center-text-input {
						width: 160upx;
						height: 72upx;
						background: #FFFFFF;
						border-radius: 10upx;
						border: 1px solid #DFDFDF;
						padding-left: 32upx;
						font-size: 28upx;
						display: inline-block;
						vertical-align: middle;
						margin: 0 16upx;
					}
				}
				.upload-box {
					display: inline-block;
					margin-right: 10upx;
					vertical-align: text-top;
					.upload-img {
						border: 1px dashed #E0E0E0;
						width: 190upx;
						height: 300upx;
					}
					.upload-icon {
						border: 1px dashed #E0E0E0;
						width: 190upx;
						height: 300upx;
						text-align: center;
						line-height: 300upx;
						font-size: 60upx;
						color: #949494;
						margin-bottom: 14px;
					}
					.title {
						font-size: 28upx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						line-height: 28upx;
						margin-top: 16upx;
						text-align: center;
						color: #666666;
					}
				}
				.uni-list {
					font-size: 26upx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					line-height: 36upx;
					.uni-list-cell {
						margin-right: 0 !important;
						margin-bottom: 24upx;
						.other-font {
							color: $theme-color;
						}

					}
				}

			}
		}
		.sumbit-btn {
			margin: 32upx;
			height: 96upx;
			background: $theme-background-color;
			border-radius: 10upx;
			font-size: 32upx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 96upx;
			margin-top: 48upx;
		}
	}
</style>
